<template>
  <div class="page flex-col">
    <div class="main1 flex-col">
      <div class="box1 flex-row">
        <div class="outer1 flex-col">
          <div class="layer1 flex-col">
            <img
              class="img1"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/dds/ddsVip/kt.png"
            />
            <span class="info1">挂号小秘书</span>
          </div>
        </div>
        <div class="outer2 flex-col">
          <div class="outer3 flex-col">
            <img
              class="pic1"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/dds/ddsVip/kt.png"
            />
            <span class="word1">重疾专业陪诊</span>
          </div>
        </div>
        <div class="outer4 flex-col">
          <div class="bd1 flex-col">
            <img
              class="img2"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/dds/ddsVip/kt.png"
            />
            <span class="info2">健康档案建立</span>
          </div>
        </div>
      </div>
      <div class="box2 flex-row">
        <div
          class="main2-0 flex-col"
          v-for="(item, index) in loopData0"
          :key="index"
        >
          <div class="box3-0 flex-col">
            <!-- <span class="info3-0" v-html="item.lanhutext0"></span> -->
          </div>
          <img
            class="pic2-0"
            referrerpolicy="no-referrer"
            :src="item.lanhuimage0"
          />
        </div>
      </div>
    </div>
    <div class="main3 flex-col"></div>
    <div class="main4 flex-col">
      <div class="box4 flex-col">
        <div class="mod1 flex-row">
          <div class="layer2 flex-col">
            <img
              class="img3"
              referrerpolicy="no-referrer"
              src="../../assets/imgs/dds/ddsVip/header.png"
            />
          </div>
          <div class="layer3 flex-col">
            <div class="bd2 flex-row">
              <div class="bd3 flex-col"></div>
              <span class="word2">黄金会员</span>
            </div>
            <span class="word3">该等级会员可享受8项会员权益</span>
          </div>
        </div>
        <div class="mod2 flex-col">等级说明</div>
      </div>
      <!-- <span class="word4">等级说明</span> -->
    </div>
    <div class="main5 flex-col"></div>
    <div class="main6 flex-col">
      <div class="mod3 flex-row">
        <span class="txt1">我的权益</span>
        <span class="txt2">6</span>
        <span class="info6">/12</span>
        <span class="txt3">VIP服务手册</span>
        <img
          class="label1"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/dds/ddsVip/wh.png"
            />
      </div>
    </div>
    <div class="main7 flex-col">
      <div class="layer4 flex-col">
        <div class="pic3">

        </div>
        <span class="word5">重疾门诊绿通</span>
      </div>
      <img
        class="img4"
        referrerpolicy="no-referrer"
        src="../../assets/imgs/dds/ddsVip/kt.png"
            />
    </div>
    <div class="main8 flex-col">
      <div class="main9 flex-col">
        <img
          class="pic4"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/dds/ddsVip/kt.png"
            />
        <span class="txt4">家庭医生咨询</span>
      </div>
    </div>
    <div class="main10 flex-col">
      <div class="box5 flex-col">
        <img
          class="img5"
          referrerpolicy="no-referrer"
          src="../../assets/imgs/dds/ddsVip/kt.png"
        />
        <span class="txt5">体检报告解读</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [
        {
          lanhutext0: 'V4',
          lanhuimage0: require('../../assets/imgs/dds/ddsVip/bz7.png'),
        },
        {
          lanhutext0: 'V4',
          lanhuimage0: require('../../assets/imgs/dds/ddsVip/bz8.png'),
        },
        {
          lanhutext0: 'V4',
          lanhuimage0: require('../../assets/imgs/dds/ddsVip/bz9.png'),
        },
        {
          lanhutext0: 'V4',
          lanhuimage0: require('../../assets/imgs/dds/ddsVip/bz10.png'),
        },
        {
          lanhutext0: 'V4',
          lanhuimage0: require('../../assets/imgs/dds/ddsVip/bz11.png'),
        },
        {
          lanhutext0: 'V4',
          lanhuimage0: require('../../assets/imgs/dds/ddsVip/bz12.png'),
        },
      ],
      constants: {}
    };
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.page {
  z-index: 1;
  position: relative;
  width: 750px;
  height: 1658px;
  background-color: rgba(247, 246, 252, 1);
  overflow: hidden;
  justify-content: flex-end;
  padding-bottom: 70px;
  align-items: center;
  .main1 {
    z-index: auto;
    width: 670px;
    height: 739px;
    .box1 {
      z-index: auto;
      width: 670px;
      height: 236px;
      justify-content: space-between;
      .outer1 {
        z-index: 122;
        height: 236px;
        background: url('../../assets/imgs/dds/ddsVip/bz3.png')
          100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
        width: 210px;
        justify-content: flex-end;
        padding-bottom: 42px;
        .layer1 {
          z-index: auto;
          width: 210px;
          height: 110px;
          .img1 {
            z-index: 227;
            width: 52px;
            height: 51px;
            align-self: center;
          }
          .info1 {
            z-index: 123;
            width: 210px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(38, 46, 63, 1);
            font-size: 28px;
            font-family: Helvetica;
            line-height: 36px;
            text-align: center;
            margin-top: 22px;
          }
        }
      }
      .outer2 {
        z-index: 117;
        height: 236px;
        background: url('../../assets/imgs/dds/ddsVip/bz5.png')
          100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
        width: 210px;
        justify-content: flex-end;
        padding-bottom: 43px;
        align-items: center;
        .outer3 {
          z-index: auto;
          // width: 168px;
          height: 109px;
          .pic1 {
            z-index: 203;
            width: 52px;
            height: 51px;
            align-self: center;
          }
          .word1 {
            z-index: 118;
            // width: 168px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(38, 46, 63, 1);
            font-size: 28px;
            font-family: Helvetica;
            line-height: 36px;
            text-align: center;
            margin-top: 22px;
          }
        }
      }
      .outer4 {
        z-index: 84;
        height: 236px;
        background: url('../../assets/imgs/dds/ddsVip/bz6.png')
          100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
        width: 210px;
        justify-content: flex-end;
        padding-bottom: 42px;
        .bd1 {
          z-index: auto;
          width: 210px;
          height: 110px;
          .img2 {
            z-index: 211;
            width: 52px;
            height: 51px;
            align-self: center;
          }
          .info2 {
            z-index: 85;
            width: 210px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(38, 46, 63, 1);
            font-size: 28px;
            font-family: Helvetica;
            line-height: 36px;
            text-align: center;
            margin-top: 22px;
          }
        }
      }
    }
    .box2 {
      z-index: auto;
      width: 670px;
      height: 487px;
      margin-top: 16px;
      flex-wrap: wrap;
      .main2-0 {
        z-index: 89;
        height: 236px;
        border-radius: 20px;
        overflow: hidden;
        width: 210px;
        justify-content: flex-start;
        padding-top: 90px;
        align-items: center;
        position: relative;
        margin: 0 20px 16px 0;
        &:nth-child(3n) {
          margin-right: 0;
        }
        &:nth-last-child(-n + 3) {
          margin-bottom: 0;
        }
        .box3-0 {
          z-index: 173;
          height: 50px;
          border-radius: 50%;
          background: url('../../assets/imgs/dds/ddsVip/bz13.png') no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
          width: 50px;
          justify-content: center;
          align-items: center;
          .info3-0 {
            z-index: 174;
            width: 29px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 20px;
            font-family: Arial-Black;
            line-height: 28px;
            text-align: center;
          }
        }
        .pic2-0 {
          z-index: 90;
          position: absolute;
          left: 0;
          top: 0;
          width: 210px;
          height: 236px;
        }
      }
    }
  }
  .main3 {
    z-index: 257;
    height: 75px;
    background: url('../../assets/imgs/dds/ddsVip/ykt.png') -10px -5px
      no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
    width: 116px;
    justify-content: flex-start;
    padding-top: 14px;
    align-items: center;
    position: absolute;
    left: 528px;
    top: 70px;
    .info4 {
      z-index: 258;
      width: 78px;
      display: block;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 26px;
      font-family: PingFangSC-Medium;
      line-height: 37px;
      text-align: center;
    }
  }
  .main4 {
    z-index: 240;
    height: 350px;
    background: url('../../assets/imgs/dds/ddsVip/vip.png')
      0px 0px no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
    width: 650px;
    justify-content: flex-start;
    padding-top: 38px;
    align-items: center;
    position: absolute;
    left: 51px;
    top: 78px;
    .box4 {
      z-index: auto;
      width: 550px;
      height: 247px;
      .mod1 {
        z-index: auto;
        width: 550px;
        height: 100px;
        justify-content: space-between;
        .layer2 {
          z-index: 253;
          height: 100px;
          border-radius: 50%;
          width: 100px;
          .img3 {
            z-index: 254;
            width: 100px;
            height: 100px;
            border-radius: 50%;
          }
        }
        .layer3 {
          z-index: auto;
          width: 420px;
          height: 93px;
          margin-top: 7px;
          .bd2 {
            z-index: auto;
            width: 296px;
            height: 53px;
            margin-left: 1px;
            justify-content: space-between;
            .bd3 {
              z-index: 249;
              height: 38px;
              border-radius: 50%;
              background: url('../../assets/imgs/dds/ddsVip/V1.png')
                100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
              margin-top: 7px;
              width: 38px;
              justify-content: center;
              .info5 {
                z-index: 250;
                width: 38px;
                display: block;
                overflow-wrap: break-word;
                color: rgba(244, 217, 146, 1);
                font-size: 20px;
                font-family: Arial-Black;
                line-height: 28px;
                text-align: center;
              }
            }
            .word2 {
              z-index: 246;
              width: 246px;
              display: block;
              overflow-wrap: break-word;
              color: rgba(40, 11, 5, 1);
              font-size: 38px;
              font-family: PingFangSC-Semibold;
              font-weight: 700;
              line-height: 53px;
              text-align: left;
              background-image: linear-gradient(
                279deg,
                rgba(40, 11, 5, 1) 0%,
                rgba(56, 17, 9, 1) 100%
              );
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }
          .word3 {
            z-index: 245;
            width: 420px;
            display: block;
            overflow-wrap: break-word;
            color: rgba(40, 11, 5, 0.8);
            font-size: 22px;
            line-height: 30px;
            text-align: left;
            margin-top: 10px;
          }
        }
      }
      .mod2 {
        z-index: 244;
        // width: 140px;
        padding: 0 18px;
        height: 46px;
        border-radius: 23px;
        border: 1px solid rgba(48, 14, 7, 0.57);
        align-self: flex-start;
        margin-top: 101px;
        color: rgba(78, 47, 21, 1);
      font-size: 26px;
      line-height: 46px;
      }
    }
    .word4 {
      z-index: 243;
      position: absolute;
      left: 68px;
      top: 244px;
      width: 104px;
      display: block;
      overflow-wrap: break-word;
      color: rgba(78, 47, 21, 1);
      font-size: 26px;
      line-height: 37px;
      text-align: center;
    }
  }
  .main5 {
    z-index: 235;
    position: absolute;
    left: 662px;
    top: 112px;
    width: 193px;
    height: 280px;
    background: url('../../assets/imgs/dds/ddsVip/yk.png') -53px -31px
      no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
  }
  .main6 {
    z-index: 2;
    height: 750px;
    background: url('../../assets/imgs/dds/ddsVip/bg.png')
      100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
    width: 752px;
    justify-content: flex-end;
    padding-bottom: 194px;
    align-items: center;
    position: absolute;
    left: -1px;
    top: 1px;
    .mod3 {
      z-index: auto;
      width: 671px;
      height: 53px;
      .txt1 {
        z-index: 152;
        // width: 160px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 38px;
        letter-spacing: 1.899999976158142px;
        font-family: PingFangSC-Semibold;
        font-weight: 700;
        line-height: 53px;
        text-align: left;
      }
      .txt2 {
        z-index: 164;
        // width: 25px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 38px;
        letter-spacing: 1.899999976158142px;
        font-family: PingFangSC-Semibold;
        line-height: 53px;
        text-align: left;
        margin-left: 16px;
      }
      .info6 {
        z-index: 163;
        // width: 40px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 26px;
        line-height: 53px;
        text-align: right;
      }
      .txt3 {
        z-index: 153;
        // width: 155px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(255, 255, 255, 1);
        font-size: 28px;
        line-height: 40px;
        text-align: center;
        margin: 7px 0 0 241px;
      }
      .label1 {
        z-index: 155;
        width: 24px;
        height: 24px;
        margin: 15px 0 0 10px;
      }
    }
  }
  .main7 {
    z-index: 128;
    height: 236px;
    background: url('../../assets/imgs/dds/ddsVip/bz2.png')
      100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
    width: 210px;
    justify-content: flex-start;
    position: absolute;
    left: 40px;
    top: 597px;
    .layer4 {
      z-index: auto;
      width: 210px;
      height: 195px;
      .pic3 {
        z-index: 131;
        width: 210px;
        height: 107px;
      }
      .word5 {
        z-index: 132;
        width: 210px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 28px;
        font-family: Helvetica;
        line-height: 36px;
        text-align: center;
        margin-top: 51px;
      }
    }
    .img4 {
      z-index: 219;
      position: absolute;
      left: 79px;
      top: 84px;
      width: 52px;
      height: 51px;
    }
  }
  .main8 {
    z-index: 135;
    height: 236px;
    background: url('../../assets/imgs/dds/ddsVip/bz1.png')
      100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
    width: 210px;
    justify-content: flex-end;
    padding-bottom: 43px;
    align-items: center;
    position: absolute;
    left: 270px;
    top: 597px;
    .main9 {
      z-index: auto;
      // width: 168px;
      height: 109px;
      .pic4 {
        z-index: 142;
        width: 52px;
        height: 51px;
        align-self: center;
      }
      .txt4 {
        z-index: 136;
        // width: 168px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 28px;
        font-family: Helvetica;
        line-height: 36px;
        text-align: center;
        margin-top: 22px;
      }
    }
  }
  .main10 {
    z-index: 140;
    height: 236px;
    background: url('../../assets/imgs/dds/ddsVip/bz4.png')
      100% no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
    width: 210px;
    justify-content: flex-end;
    padding-bottom: 42px;
    position: absolute;
    left: 500px;
    top: 597px;
    .box5 {
      z-index: auto;
      width: 210px;
      height: 110px;
      .img5 {
        z-index: 195;
        width: 52px;
        height: 51px;
        align-self: center;
      }
      .txt5 {
        z-index: 141;
        width: 210px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(38, 46, 63, 1);
        font-size: 28px;
        font-family: Helvetica;
        line-height: 36px;
        text-align: center;
        margin-top: 22px;
      }
    }
  }
}

</style>
